<div class="layui-fluid" id="VIEW-list-table" lay-title="菜单管理">
    <div class="layui-row layui-col-space12">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body nepadmin-table-full">
                    <div class="layui-btn-container nepadmin-pad-t10 nepadmin-pad-l10">
                        <div class="layui-btn layui-btn-sm" id="addSysMenu">添加菜单</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="lower">禁用</div>
                        <div class="layui-btn layui-btn-sm layui-btn-primary table-action" data-type="del">删除</div>
                    </div>

                    <!--<table id="list-table" lay-filter="list-table"></table>-->
                    <table class="layui-hidden" id="treeTableMenu" lay-filter="treeTableMenu"></table>
                </div>
            </div>
        </div>

    </div>

</div>
<script>
    layui.use(['jquery', 'treeGrid', 'conf', 'view', 'layer', 'admin'], function () {
        var $ = layui.jquery
            , conf = layui.conf
            , layer = layui.layer
            , admin = layui.admin
            , treeGrid = layui.treeGrid;

        var  tableId = 'treeTableMenu';
        var view = $('#VIEW-list-table');
        treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , url: conf.requestUrl + '/sysMenu/list?token=' + admin.loginToken
            , cellMinWidth: 100
            , idField: 'id'//必須字段
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'parentId'//树形父id字段名称
            , treeShowName: 'name'//以树形式显示的字段
            , heightRemove: [".dHead", 10]//不计算的高度,表格设定的是固定高度，此项不生效
            , height: '100%'
            , isFilter: false
            , iconOpen: false//是否显示图标【默认显示】
            , isOpenDefault: true//节点默认是展开还是折叠【默认展开】
            , loading: true
            , method: 'get'
            , cols: [[
                /*{type:'numbers',title:'序号'}
                 ,{type:'radio'}*/
                {type: 'checkbox', sort: true}
                , {field: 'name', width: 300, title: '菜单名称'}
                , {field: 'orderNum', width: 100, title: '排序'}
                , {field: 'url', title: '请求地址'}
                , {field: 'perms', title: '权限'}
                , {
                    width: 80, title: '状态', align: 'center', templet: function (d) {
                        var status = {
                            0: {title: '目录', color: 'blue'},
                            1: {title: '菜单', color: 'orange'},
                            2: {title: '按钮', color: 'red'}
                        }[d.type];
                        return '<span class="layui-badge layui-bg-' + status.color + '">' + status.title + '</span>';
                    }
                }

                , {
                    width: 150, title: '操作', align: 'center', templet: function (d) {
                        var html = '';
                        var addBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
                        var editBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>';
                        var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return addBtn + editBtn + delBtn;
                    }
                }
            ]]
            , isPage: false
            , parseData: function (res) {//数据加载后回调
                return res;
            }
            , onClickRow: function (index, o) {
                console.log(index, o, "单击！");
            }
            , onDblClickRow: function (index, o) {
                console.log(index, o, "双击");
            }
        });

        treeGrid.on('tool(' + tableId + ')', function (obj) {
            if (obj.event === 'del') {//删除行
                del(obj);
            } else if (obj.event === "add") {//添加行
                // 新增菜单
                admin.popup({
                        url: '/sys/menu/sysMenuEdit',
                        area: ['650px', '450px'],
                        data : {
                            menuId:"",
                            parentMenuId : obj.data.id,
                            treeGrid:treeGrid
                        }
                    }
                )
                return false
            } else if (obj.event === "edit") {
                admin.popup({
                        url: '/sys/menu/sysMenuEdit',
                        area: ['650px', '450px'],
                        data : {
                            menuId:obj.data.id,
                            parentMenuId : "",
                            treeGrid:treeGrid
                        }
                    }
                )
                return false
            }
        });

        treeGrid.on('edit(treeTable)', function (obj) { //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj.value); //得到修改后的值
            console.log(obj.field); //当前编辑的字段名
            console.log(obj.data); //所在行的所有相关数据
        });

        $("#addSysMenu").on("click", function () {
            menuId = "";
            admin.popup({
                    url: '/sys/menu/sysMenuEdit',
                    area: ['650px', '450px'],
                    data : {
                        menuId:"",
                        parentMenuId : "",
                        treeGrid:treeGrid
                    }
                }
            )
            return false
        });
    });

    function del(obj) {
        layer.confirm("你确定删除数据吗？如果存在下级节点则一并删除，此操作不能撤销！", {icon: 3, title: '提示'},
            function (index) {//确定回调
                obj.del();
                layer.close(index);
            }, function (index) {//取消回调
                layer.close(index);
            }
        );
    }

    var i = 1000000;
    //添加
    function add(pObj) {
        var pdata = pObj ? pObj.data : null;
        var param = {};
        param.name = '水果' + Math.random();
        param.id = ++i;
        param.pId = pdata ? pdata.id : null;
        treeGrid.addRow(tableId, pdata ? pdata[treeGrid.config.indexName] + 1 : 0, param);
    }

</script>